<template>
  <div>
    <div>
      <table style="width: 100%;text-align: center">
        <tr>
          <td></td>
          <td><img src="../../assets/images/pic/light.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light.jpg" width="10%" height="8%"/></td>
        </tr>
        <tr>
          <td><img src="../../assets/images/pic/light_tip.jpg" width="20%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light_tip.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light_tip.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light_tip.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light_tip.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light_tip.jpg" width="10%" height="8%"/></td>
          <td><img src="../../assets/images/pic/light_tip.jpg" width="10%" height="8%"/></td>

        </tr>
      </table>
    </div>
    <div style="margin-top: 10px">
      <wh-table :tableData="tableData" :tableHeader="tableHeader" :option="option" style="float:left;margin-right: 2%"></wh-table>
      <wh-table :tableData="tableData" :tableHeader="tableHeader" :option="option" ></wh-table>
    </div>

    <div style="margin-top: 20px">

      <div class="quart" align="center">
        <span style="display: block;margin-top: -55%">统计</span>
      </div>
      <wh-table :tableData="tableData" :tableHeader="tableHeader"  :option="option2"></wh-table>
    </div>
  </div>

</template>
<script>
  import whTable from '@/components/wh-table/index.vue'
  export default {
    name:'hotReact',
    data(){
      return{
        tableData: [],
        tableHeader:[],
        option:{width:'49%'},
        option2:{width:'90%'}
      }
    },
    components:{
      whTable
    },
    mounted(){
      this.setTableHeader();
    },
    methods:{
      setTableHeader(){
        let self = this;
        self.tableHeader = [
          // {"columnName": "workLineName", "coloumNameCn": "线别","minWidth":"40"},
          // {"columnName": "workName", "coloumNameCn": "班别","minWidth":"40"},
          // {"columnName": "status", "coloumNameCn": "状态","minWidth":"40"},
          {"columnName": "", "coloumNameCn": "产量","children":[
              {"columnName": "targetOutput", "coloumNameCn": "计划","minWidth":"40"},
              {"columnName": "actualOutput", "coloumNameCn": "实际","minWidth":"40"},
              {"columnName": "disOutput", "coloumNameCn": "差额","minWidth":"40"},
            ],"minWidth":"40"
          },
          {"columnName": "", "coloumNameCn": "进度","children":[
              {"columnName": "ouputProgress", "coloumNameCn": "产量","minWidth":"40"},
              {"columnName": "spendTime", "coloumNameCn": "时间","minWidth":"40"},
            ],"minWidth":"40"
          },
          {"columnName": "", "coloumNameCn": "人员","children":[
              {"columnName": "planUserCount", "coloumNameCn": "计划","minWidth":"40"},
              {"columnName": "actualUserCount", "coloumNameCn": "实际","minWidth":"40"},
            ],"minWidth":"40"
          },
          {"columnName": "", "coloumNameCn": "SPM","children":[
              {"columnName": "productive", "coloumNameCn": "目标","minWidth":"40"},
              {"columnName": "actualProductive", "coloumNameCn": "实际","minWidth":"40"},
            ],"minWidth":"40"
          },
          {"columnName": "", "coloumNameCn": "实际停线","children":[
              {"columnName": "stopLineTime", "coloumNameCn": "目标","minWidth":"40"},
              {"columnName": "stopActualTime", "coloumNameCn": "实际","minWidth":"40"},
            ],"minWidth":"40"
          },
          {"columnName": "", "coloumNameCn": "MU","children":[
              {"columnName": "muPlan", "coloumNameCn": "目标","minWidth":"40"},
              {"columnName": "muActual", "coloumNameCn": "实际","minWidth":"40"},
            ],"minWidth":"40"
          }
        ];
      }
    }
  }
</script>
<style scoped>
  .quart {
    float:left;
    width: 8.5%;
    height: 0;
    padding-top: 8.5%;
    border: 1px solid #ccc;
    background: #59FF5F
  }
</style>
